<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>库存查看</title>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <script src="../../jquery/jquery-3.4.1.min.js"></script>
    <script src="../../bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../../bootstrap-table/bootstrap-table.css">
    <script src="../../bootstrap-table/bootstrap-table.js"></script>
    <script src="../../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <link rel="stylesheet" href="../../font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../toastr/toastr.min.css">
    <script src="../../toastr/toastr.min.js"></script>

</head>
<body class="container-fluid">
<style>
    ::-webkit-scrollbar {display:none}
</style>
<div style=" width:0px;   height: 0px;  overflow-y: scroll;">
</div>
<div class="row" id="tableToolBar">
    <div class="col-md-3 form-group">
        <label class="col-md-3 control-label">颜色</label>
        <div class="col-md-9">
            <input type="text" class="form-control" id="c_color"
                   placeholder="请输入颜色">
        </div>
    </div>
    <div class="col-md-3 form-group">
        <label class="col-md-3 control-label">价格</label>
        <div class="col-md-9">
            <input type="text" class="form-control" id="c_price"
                   placeholder="请输入价格">
        </div>
    </div>
    <div class="col-md-3 form-group">
        <label class="col-md-3 control-label">数量</label>
        <div class="col-md-9">
            <input type="text" class="form-control" id="c_count"
                   placeholder="请输入数量">
        </div>
    </div>
    <div class="col-md-3">
        <button class="btn btn-sm btn-success" id="addBtn" style="margin-left: 15px"><i class="fa fa-plus" aria-hidden="true"></i>添加库存</button>
    </div>
</div>
<!--bootstrap表-->
<div class="row">
    <div class="col-md-12" id="myTable"></div>
</div>

<script>
$(document).ready(function () {
        $("#addBtn").click(function () {
            $.ajax({
                url: "../../car/insertInventory",
                type: "post",
                dataType: "json",
                data: {
                    c_id:sessionStorage.getItem("c_id"),
                    c_color: $("#c_color").val(),
                    c_price: $("#c_price").val(),
                    c_count: $("#c_count").val(),
                },
                success: function (result) {
                    if (result.errorCode == 0) {
                        $("#myDialog").modal("hide");
                        initTable();
                        toastr.success(result.status);
                    }
                }
            });
        })
        initTable();
        function initTable() {
            $("#myTable").bootstrapTable("destroy");
            $("#myTable").bootstrapTable({
                url: "../../car/selectInventory",
                method: 'GET', //请求方式（*）
                toolbar: '#tableToolBar',              //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 20, 50], //可供选择的每页的行数（*）
                search: true, //是否显示表格搜索,模糊查询
                strictSearch: false,//精确查询
                // silent : true,// 刷新事件必须设置
                showColumns: true, //是否显示所有的列（选择显示的列）
                showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
                //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "in_id", //每一行的唯一标识，一般为主键列
                showToggle: true, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                clickToSelect: true,    //是否启用点击选中行
                columns: [
                    {
                        checkbox: true,
                    },
                    {
                        field: 'c_name',//JSon数据中的相应的key
                        title: '车名',//表头信息
                        sortable: true,
                        width: 300,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_color',
                        title: '颜色',
                        sortable: true,
                        width: 300,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_price',
                        title: '价格（万）',
                        sortable: true,
                        width: 300,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        field: 'c_count',
                        title: '数量',
                        sortable: true,
                        width: 300,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        title:"操作",
                        width: 300,
                        align: 'center',
                        valign: 'middle',
                        // 如果要对按钮进行操作，并且需要获取点击的按钮对应的行内的数据，需要加：
                        events:operateEvents,
                        formatter:function (value,row,index) {
                            return "<button class='btn btn-primary btn-sm delInventory' ><i class='fa fa-pencil-square-o' aria-hidden='true'></i>删除库存</button>\n"
                        }
                    }

                ],
            });
        }
    });
window.operateEvents={
        'click .delInventory': function (e, value, row, index) {
            $.ajax({
                url:"../../car/deleteInventory",
                type:"get",
                dataType:"json",
                data:{
                    in_id:row.in_id
                },
                success:function (result) {
                    if (result.errorCode == 0) {

                        toastr.success(result.status);
                         {
                            $("#myTable").bootstrapTable("destroy");
                            $("#myTable").bootstrapTable({
                                url: "../../car/selectInventory",
                                method: 'GET', //请求方式（*）
                                toolbar: '#tableToolBar',              //工具按钮用哪个容器
                                striped: true, //是否显示行间隔色
                                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                                pagination: true, //是否显示分页（*）
                                sortable: true, //是否启用排序
                                sortOrder: "asc", //排序方式
                                sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                                pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                                pageSize: 10, //每页的记录行数（*）
                                pageList: [10, 20, 50], //可供选择的每页的行数（*）
                                search: true, //是否显示表格搜索,模糊查询
                                strictSearch: false,//精确查询
                                // silent : true,// 刷新事件必须设置
                                showColumns: true, //是否显示所有的列（选择显示的列）
                                showRefresh: true, //是否显示刷新按钮
                                minimumCountColumns: 2, //最少允许的列数
                                clickToSelect: true, //是否启用点击选中行
                                //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                                uniqueId: "in_id", //每一行的唯一标识，一般为主键列
                                showToggle: true, //是否显示详细视图和列表视图的切换按钮
                                cardView: false, //是否显示详细视图
                                detailView: false, //是否显示父子表
                                clickToSelect: true,    //是否启用点击选中行
                                columns: [
                                    {
                                        checkbox: true,
                                    },
                                    {
                                        field: 'c_name',//JSon数据中的相应的key
                                        title: '车名',//表头信息
                                        sortable: true,
                                        width: 300,
                                        align: 'center',
                                        valign: 'middle',
                                    },
                                    {
                                        field: 'c_color',
                                        title: '颜色',
                                        sortable: true,
                                        width: 300,
                                        align: 'center',
                                        valign: 'middle',
                                    },
                                    {
                                        field: 'c_price',
                                        title: '价格（万）',
                                        sortable: true,
                                        width: 300,
                                        align: 'center',
                                        valign: 'middle',
                                    },
                                    {
                                        field: 'c_count',
                                        title: '数量',
                                        sortable: true,
                                        width: 300,
                                        align: 'center',
                                        valign: 'middle',
                                    },
                                    {
                                        title:"操作",
                                        width: 300,
                                        align: 'center',
                                        valign: 'middle',
                                        // 如果要对按钮进行操作，并且需要获取点击的按钮对应的行内的数据，需要加：
                                        events:operateEvents,
                                        formatter:function (value,row,index) {
                                            return "<button class='btn btn-primary btn-sm delInventory' ><i class='fa fa-pencil-square-o' aria-hidden='true'></i>删除库存</button>\n"
                                        }
                                    }

                                ],
                            });
                        }
                    }
                }
            });
            initTable();
        }
    }

</script>
</body>
</html>